<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气应用</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="weather-container">
        <header class="weather-header">
            <h1>天气预报</h1>
            <div class="search-box">
                <input type="text" placeholder="搜索城市..." id="city-search">
                <button id="search-btn"><i class="fas fa-search"></i></button>
            </div>
        </header>

        <main class="weather-main">
            <div class="current-weather">
                <div class="location">
                    <h2>北京市</h2>
                    <p class="date">2023年7月15日 星期六</p>
                </div>
                <div class="weather-info">
                    <div class="temperature">
                        <span class="temp">28°</span>
                        <span class="weather-icon"><i class="fas fa-sun"></i></span>
                    </div>
                    <div class="conditions">
                        <p class="weather-desc">晴天</p>
                        <p class="feels-like">体感温度: 30°</p>
                    </div>
                </div>
                <div class="details">
                    <div class="detail-item">
                        <i class="fas fa-tint"></i>
                        <span>湿度: 65%</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-wind"></i>
                        <span>风速: 3.5 m/s</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-compress-alt"></i>
                        <span>气压: 1013 hPa</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-eye"></i>
                        <span>能见度: 10 km</span>
                    </div>
                </div>
            </div>

            <div class="forecast">
                <h3>未来5天预报</h3>
                <div class="forecast-cards">
                    <div class="forecast-card">
                        <p class="day">周日</p>
                        <i class="fas fa-cloud-sun"></i>
                        <p class="forecast-temp">26° / 20°</p>
                    </div>
                    <div class="forecast-card">
                        <p class="day">周一</p>
                        <i class="fas fa-cloud-rain"></i>
                        <p class="forecast-temp">24° / 19°</p>
                    </div>
                    <div class="forecast-card">
                        <p class="day">周二</p>
                        <i class="fas fa-cloud"></i>
                        <p class="forecast-temp">25° / 21°</p>
                    </div>
                    <div class="forecast-card">
                        <p class="day">周三</p>
                        <i class="fas fa-sun"></i>
                        <p class="forecast-temp">27° / 22°</p>
                    </div>
                    <div class="forecast-card">
                        <p class="day">周四</p>
                        <i class="fas fa-sun"></i>
                        <p class="forecast-temp">29° / 23°</p>
                    </div>
                </div>
            </div>

            <div class="hourly-forecast">
                <h3>24小时预报</h3>
                <div class="hourly-scroll">
                    <div class="hourly-item">
                        <p class="hour">现在</p>
                        <i class="fas fa-sun"></i>
                        <p class="hourly-temp">28°</p>
                    </div>
                    <div class="hourly-item">
                        <p class="hour">13:00</p>
                        <i class="fas fa-sun"></i>
                        <p class="hourly-temp">29°</p>
                    </div>
                    <div class="hourly-item">
                        <p class="hour">14:00</p>
                        <i class="fas fa-sun"></i>
                        <p class="hourly-temp">30°</p>
                    </div>
                    <div class="hourly-item">
                        <p class="hour">15:00</p>
                        <i class="fas fa-cloud-sun"></i>
                        <p class="hourly-temp">29°</p>
                    </div>
                    <div class="hourly-item">
                        <p class="hour">16:00</p>
                        <i class="fas fa-cloud-sun"></i>
                        <p class="hourly-temp">28°</p>
                    </div>
                    <div class="hourly-item">
                        <p class="hour">17:00</p>
                        <i class="fas fa-cloud"></i>
                        <p class="hourly-temp">27°</p>
                    </div>
                    <div class="hourly-item">
                        <p class="hour">18:00</p>
                        <i class="fas fa-cloud"></i>
                        <p class="hourly-temp">26°</p>
                    </div>
                    <div class="hourly-item">
                        <p class="hour">19:00</p>
                        <i class="fas fa-cloud-moon"></i>
                        <p class="hourly-temp">24°</p>
                    </div>
                </div>
            </div>
        </main>

        <footer class="weather-footer">
            <p>&copy; 2023 天气应用 | 数据更新于: 12:00</p>
        </footer>
    </div>

    <script>
        // 简单的日期显示更新
        const dateElement = document.querySelector('.date');
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        dateElement.textContent = now.toLocaleDateString('zh-CN', options);

        // 搜索按钮事件（模拟）
        document.getElementById('search-btn').addEventListener('click', function() {
            const city = document.getElementById('city-search').value;
            if (city) {
                alert(`搜索城市: ${city} (模拟功能)`);
            }
        });

        // 回车键搜索
        document.getElementById('city-search').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('search-btn').click();
            }
        });
    </script>
</body>
</html>